<template>
  <a-modal
    v-model:visible="isShown"
    class="create_model"
    :footer="null"
    @cancel="handleCancel"
  >
    <div class="title">{{ title_ }}</div>

    <a-input v-model:value="input_value" placeholder="请输入标题"></a-input>

    <a-button type="primary" @click="handleCreated">立即创建</a-button>
  </a-modal>
</template>

<script lang="ts">
import { useQuestChoseModelStore } from '@/store/create';
import { message } from 'ant-design-vue';
import { computed, defineComponent, ref } from 'vue';
export default defineComponent({
  components: {},
  props: { title: { type: String, default: '' } },
  emits: [
    /** 点击创建 */
    'handleCreated',
  ],
  setup(props, { emit }) {
    const modelStore = useQuestChoseModelStore();
    // const
    const isShown = computed<boolean>({
      get() {
        return modelStore.isShown;
      },
      set(value) {
        modelStore.setShown(value);
      },
    });
    const title_ = computed<string>(() => `创建${props.title}问卷`);
    const input_value = ref<string>('');

    const handleCreated = () => {
      if (!input_value.value) {
        message.warn(`${props.title}名不能为空`);
        return;
      }
      emit('handleCreated', input_value.value);
    };

    const handleCancel = () => {
      modelStore.setShown(false);
    };

    return { isShown, title_, input_value, handleCreated, handleCancel };
  },
});
</script>
<style lang="less" scoped>
.create_model {
  .title {
    font-size: 24px;
    line-height: 32px;
    color: #262626;
    margin: 50px 0 30px;
    text-align: center;
  }
  button {
    width: 130px;
    height: 40px;
    margin-top: 48px;
  }
  input {
    width: 580px;
    height: 50px;
    border-radius: 2px;
    margin: 0 auto;
    padding: 0 16px px;
    border: 1px solid #d9d9d9;
  }
  :global(.ant-modal-content) {
    width: 648px;
  }
  :global(.ant-modal-body) {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
}
</style>
